<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>activityCountDown</title>
</head>

<body>

    <div id="time1"></div>
    <div id="time2"></div>
    <div id="time3"></div>
    <script>
        const activityCountDown = (startDate, endDate, dom) => {
            let timer = null, result = '';
            const start = new Date(startDate),
                end = new Date(endDate);
            const startSeconds = start.getTime(),
                endSeconds = end.getTime();
            const formateTime = time => [
                Math.floor(time / 1000 / 60 / 60 / 24),
                Math.floor(time / 1000 / 60 / 60 % 24),
                Math.floor(time / 1000 / 60 % 60),
                Math.floor(time / 1000 % 60)
            ];
            const fillZero = v => `0${v}`.slice(-2);
            const computedTime = () => {
                const nowSeconds = new Date().getTime();
                let status = false;
                const start_diff = startSeconds - nowSeconds,
                    end_diff = endSeconds - nowSeconds;
                if (start_diff >= 0) {
                    const [day, hour, minute, seconds] = formateTime(start_diff);
                    result = `距离活动开始还有:${fillZero(day)}天${fillZero(hour)}小时${fillZero(minute)}分钟${fillZero(seconds)}秒`;
                    status = false;
                } else if (end_diff >= 0) {
                    const [day, hour, minute, seconds] = formateTime(end_diff);
                    result = `距离活动结束还有:${fillZero(day)}天${fillZero(hour)}小时${fillZero(minute)}分钟${fillZero(seconds)}秒`;
                    status = false;
                } else {
                    result = `活动已结束`;
                    status = true;
                }
                if (!status) {
                    timer = setTimeout(computedTime, 1000);
                    dom.textContent = result;
                } else {
                    if (timer) {
                        clearTimeout(timer);
                    }
                    dom.textContent = result;
                }
            };
            computedTime();
        };
        const timeElements = document.querySelectorAll('div');
        const times = [
            ['2019-10-29 17:00:00', '2019-10-30 16:00:00'],
            ['2023-10-29 17:00:00', '2023-10-30 16:00:00'],
            ['2023-01-29 17:00:00', '2023-10-30 16:00:00'],
        ]
        timeElements.forEach((ele, index) => {
            activityCountDown(times[index][0], times[index][1], ele);
        })
    </script>
</body>

</html>